import * as Cesium from 'cesium'

export default function addEntity() {
  // 添加一个点
  const point1 = window.viewer.entities.add({
    id: 'point1',
    position: Cesium.Cartesian3.fromDegrees(121, 30),
    point: {
      pixelSize: 20,   // 点像素大小
      color: Cesium.Color.BLUE,
      outlineColor: Cesium.Color.RED
    }
  })
  // window.viewer.zoomTo(point1)

  // 添加一个图片广告牌
  const billboard1 = window.viewer.entities.add({
    id: 'billboard1',
    position: Cesium.Cartesian3.fromDegrees(116, 40, 10),
    billboard: {
      image: '../public/vite.svg',
      scale: 1.5,
      color: Cesium.Color.YELLOW
    }
  })
  // 添加一个面
  const myarea = window.viewer.entities.add({
    id: 'myarea1',
    polygon: {
      // 等级制度，包括postions和holes两个属性
      hierarchy: {
        positions: Cesium.Cartesian3.fromDegreesArray([
          -109.080842, 45.002073,
          -105.91517, 45.002073,
          -100.058488, 40.996596
        ])
      },
      height: 0,  // 这个面所处的高度，不是这个面的高
      extrudedHeight: 1000,    // 这个面的高度
      material: Cesium.Color.RED.withAlpha(.5),  // withAlpha 其实就是opacity 透明度
      outline: true,
      fill: true,  // 是否填充颜色
      outlineColor: Cesium.Color.BLACK
    }
  })
  // 添加一条线
  const myployline = window.viewer.entities.add({
    id: 'polyline1',
    polyline: {
      // 返回笛卡尔坐标数组
      positions: Cesium.Cartesian3.fromDegreesArray([
        120, 20,
        121, 23
      ]),
      width: 10,
      material: Cesium.Color.GREEN
    }
  })
  // 添加一个椭圆
  const ellipse1 = window.viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(118, 30),
    name: '这是一个椭圆',
    ellipse: {
      semiMajorAxis: 500,  // 半长轴
      semiMinorAxis: 300,  // 半短轴
      material: Cesium.Color.BEIGE,
      rotation: Math.PI / 2  // 从长轴方向逆时针旋转
    }
  })
  // 添加一个Rectangle，左下坐标和右上坐标
  const rectangle = window.viewer.entities.add({
    rectangle: {
      coordinates: Cesium.Rectangle.fromDegrees(100, 40, 105, 45),
      extrudedHeight: 30000
    }
  })

  // window.viewer.zoomTo(billboard1)
  // window.viewer.zoomTo(ellipse1)
  // window.viewer.zoomTo(myployline)
  window.viewer.zoomTo(rectangle)

  // 添加一个实体组合
  // const billboard2 = window.viewer.entities.add({
  //   position: new Cesium.Cartesian3.fromDegrees(120, 30, 100),
  //   billboard: {
  //     image: '../public/marker-bottom-left.png',
  //     scale: .3,
  //     color: Cesium.Color.RED
  //   }
  // })
  // const line = window.viewer.entities.add({
  //   polyline: {
  //     positions: Cesium.Cartesian3.fromDegreesArrayHeights([120, 30, 0, 120, 30, 100]),
  //     material: Cesium.Color.AQUA
  //   }
  // })
  // const label = window.viewer.entities.add({
  //   position: new Cesium.Cartesian3.fromDegrees(120, 30, 100),
  //   label: {
  //     text: '某某小区',
  //     font: '13px',
  //     fillColor: Cesium.Color.WHITE,
  //     pixelOffset: new Cesium.Cartesian2(0, -40)   // 第一个左右偏移，第二个上下偏移
  //   }
  // })
  const entityGroup = window.viewer.entities.add({
    position: new Cesium.Cartesian3.fromDegrees(120, 30, 100),
    billboard: {
      image: '../public/marker-bottom-left.png',
      scale: .3,
      color: Cesium.Color.RED
    },
    polyline: {
      positions: Cesium.Cartesian3.fromDegreesArrayHeights([120, 30, 0, 120, 30, 100]),
      material: Cesium.Color.AQUA
    },
    label: {
      text: '某某小区',
      font: '13px',
      fillColor: Cesium.Color.WHITE,
      pixelOffset: new Cesium.Cartesian2(0, -40)   // 第一个左右偏移，第二个上下偏移
    }
  })
  console.log(entityGroup)
  window.viewer.zoomTo(entityGroup)
}